import React from 'react';
import {Component} from 'react';
import {Select} from 'uxcore';
import CNMapData from './cnmap';
import HbMapData from './hbmap';
import YCMapData from './ycmap';
import YCMapData2 from './ycmap2';

import './FgfcEchartsMap.less';

const Option = Select.Option;

export default class FgfcEchartsMap extends Component {

  constructor(props) {
    super(props);

    const t = this;
    t.handleChange = t.handleChange.bind(t);
    t.renderMap = t.renderMap.bind(t);
    t.handleCnMapClick = t.handleCnMapClick.bind(t);
    t.handleHbMapClick = t.handleHbMapClick.bind(t);
  }

  handleChange(value) {
    const {onCantonCountMapChange} = this.props;
    onCantonCountMapChange({mapSelected: value});
  }

  handleCnMapClick(e) {
    if (e.name === '湖北') {
      this.handleChange('B');
    }
  }

  handleHbMapClick(e) {
    if (e.name === '宜昌市') {
      this.handleChange('C');
    }
  }

  renderMap(selected, mapData) {
    if (selected === 'A') {
      return (
        <CNMapData onClick={this.handleCnMapClick} data={mapData}/>
      );
    }
    if (selected === 'B') {
      return (
        <HbMapData onClick={this.handleHbMapClick} data={mapData}/>
      );
    }
    if (selected === 'C') {
      return (
        <YCMapData tooltip={{title: "返岗人员", unit: '人'}} data={mapData}/>
      );
    }
    if (selected === 'D') {
      return (
        <YCMapData tooltip={{title: "返岗人员", unit: '人'}} data={mapData}/>
      );
    }
    if (selected === 'E') {
      return (
        <YCMapData2 tooltip={{title: "复工项目", unit: '个'}} data={mapData}/>
      );
    }
    if (selected === 'F') {
      return (
        <YCMapData2 tooltip={{title: "在建项目", unit: '个'}} data={mapData}/>
      );
    }
  }

  render() {
    const {
      data: {
        mapSelected = 'A',
        mapData = [],
      }
    } = this.props;
    return (
      <div className="fgfc-echarts-map">
        <Select style={{padding: '10px', width: 240}} defaultValue="A" value={mapSelected} onChange={this.handleChange}>
          <Option value="A">返岗人员出发地分布(全国)</Option>
          <Option value="B">返岗人员出发地分布(湖北)</Option>
          <Option value="C">返岗人员出发地分布(宜昌)</Option>
          <Option value="D">返岗人员目的地分布</Option>
          <Option value="E">复工项目分布</Option>
          <Option value="F">在建项目分布</Option>
        </Select>
        {
          this.renderMap(mapSelected, mapData)
        }
      </div>
    );
  }
}
